<template>
  <!-- 菜单结构 -->
  <el-menu-item index="event-report" class="event-report-item" @click="handleAddEvent">
    事件添加
  </el-menu-item>
  <!-- 事件弹窗组件 -->
  <event-detailed
    v-model="dialogVisible"
    :position="clickPosition"
    @submit-success="handleSubmitSuccess"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import EventDetailed from './child/EventDetailed.vue'
import { addPoint } from '@/api/mapgis-api/addPoint'

// 弹窗显示状态
const dialogVisible = ref(false)

// 地图点击坐标（需要实际集成地图点击事件）
const clickPosition = ref({
  lng: 114.4044, // 默认光谷广场坐标
  lat: 30.5067,
})

// 打开事件弹窗
const handleAddEvent = () => {
  dialogVisible.value = true
}

// 提交成功回调
const handleSubmitSuccess = (formData) => {
  ElMessage.success('事件提交成功')
  console.log('事件数据：', formData)
  // 此处可调用 API 提交数据
}
</script>

<style lang="scss" scoped>
// 菜单项样式优化
.event-report-item {
  &:hover {
    background-color: var(--el-color-primary-light-9);
    transition: background-color 0.3s;
  }

  &.is-active {
    background-color: inherit !important;
    color: var(--el-color-primary);
    color: inherit !important;
  }

  .el-icon {
    margin-right: 8px;
    font-size: 18px;
  }
}

// 适配暗黑模式
@media (prefers-color-scheme: dark) {
  .event-report-item {
    &:hover {
      background-color: var(--el-color-primary-dark-2);
    }
  }
}
</style>
